<template>
  <div class="wh-100 p-8">
    <div class="wh-100 overflow-auto" style="background-color: white">
      <div class="w-100 d-flex-between-center pl-16 pr-16 bor-base-b ch50">
        <div class="fs-14 fw-6">导入历史</div>
        <Button @click="$router.go(-1)" style="background-color: white">返回</Button>
      </div>
      <div class="wh-100 overflow-auto">
        <Card class="all-height card-child-height">
          <Row>
            <Alert show-icon>
              <a class="select-clear" style="cursor: pointer" @click="getHistory">刷新</a>
            </Alert>
          </Row>
          <Row class="calc-px-height">
            <div v-if="loading" class="wh-100 d-flex-around-center">
              <Spin></Spin>
            </div>
            <div v-else v-ref-height="refHeight" class="wh-100">
              <Table
                  v-if="historyList.length > 0"
                  :height="refHeight.value"
                  border
                  :columns="columns"
                  :data="historyList"
                  sortable="custom"
                  ref="table"
              ></Table>
              <div v-else class="wh-100">
                <NoData class="wh-100"></NoData>
              </div>
            </div>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10, 20, 50]"
                size="small"
                show-total
                show-elevator
                show-sizer
            ></Page>
          </Row>
        </Card>
      </div>
    </div>
  </div>
</template>
<script>

import NoData from "@/components/NoData.vue";
import {getImportErrorListApi, getImportHistoryApi} from "@/views/importHistory/api/importHistoryApi";
import XLSX from "xlsx";


export default {
  components: {NoData},
  data() {
    return {
      refHeight: {value: 0},
      loading: false,
      historyList: [],
      importErrorData: [],
      data:[],
      total: 0,
      searchForm: {
        name: '',
        status: '',
        pageNumber: 1,
        pageSize: 10,
        startDate: '',
        endDate: '',
      },
      columns: [
        {
          title: "原始文件名",
          key: "originalFileName",
          align: "center",
          minWidth: 200
        },
        {
          title: "上传后文件名（点击可下载）",
          key: "fileName",
          align: "center",
          minWidth: 600,
          render: (h, params) => {
            return h('div', [
              h('a', {
                attrs: {
                  href: params.row.fileName,
                  target: '_blank',
                  download: `${params.row.fileName}`
                }
              }, params.row.fileName)
            ]);
          }
        },
        // {
        //   title: "文件大小",
        //   key: "fileSize",
        //   align: "center",
        //   minWidth: 100
        // },
        // {
        //  title: "文件类型",
        //   key: "fileCategory",
        //   align: "center",
        //   minWidth: 100
        // },
        {
          title: "上传时间",
          key: "createTime",
          align: "center",
          minWidth: 180
        },
        {
          title: "导入完成时间",
          key: "endTime",
          align: "center",
          minWidth: 180
        },
        {
          title: "耗时(秒)",
          key: "costTime",
          align: "center",
          minWidth: 100
        },
        // {
        //   title: "操作人",
        //   key: "opUserName",
        //   align: "center",
        //   minWidth: 100
        // },
        // {
        //   title: "操作人网络设备信息",
        //   key: "opInfo",
        //   align: "center",
        //   minWidth: 100
        // },
        {
          title: "导入结果",
          key: "message",
          align: "center",
          minWidth: 350
        },
        {
          title: "错误数据条目",
          key: "errorNum",
          align: "center",
          fixed: 'right',
          minWidth: 100
        },
        {
          title: "导入状态",
          key: "status",
          align: "center",
          fixed: 'right',
          minWidth: 100,
          render: (h, params) => {
            return h('div', [
              h('span', { style: { marginLeft: '5px', color: params.row.status === '0' ? '#fd6600' : '#00fd8b' } }, params.row.status === '0' ? '导入等待中' : '导入完成')
            ]);
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                  'a',
                  {
                    style: {
                      display: params.row.errorNum > 0 ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.showDownloadError(params.row);
                      }
                    }
                  },
                  '下载错误信息'
              ),
            ]);
          }
        }
      ]

    }
  },
  methods: {
    getHistory() {
      this.loading = true;
      getImportHistoryApi(this.searchForm).then(res => {
        if (res.success) {
          this.historyList = res.result.records;
          this.total = res.result.total;
          this.loading = false;
        }
        this.loading = false;
      })
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getHistory();
    },
    showDownloadError(row) {
      getImportErrorListApi({excelImportId: row.id}).then(res => {
        if (res.success) {
          let result = res.result;
          result = result.map(item => {
            return {
              rowes: item.rowes,
              reason: item.reason,
              data: item.data
            };
          });
          console.log(result,"错误信息")
          const wb = XLSX.utils.book_new();
          this.data = [{rowes: '身份证号', reason: '错误信息', data: '详细信息'}, ...result];
          const ws = XLSX.utils.json_to_sheet(this.data, {skipHeader: true});
          XLSX.utils.book_append_sheet(wb, ws, '错误信息');
          XLSX.writeFile(wb, '错误信息.xlsx');
        }
      });
      // let data = this.importErrorData;
      // console.log(data)
      // data = data.map(item => {
      //   return {
      //     rowes: item.rowes,
      //     reason: item.reason,
      //     data: item.data
      //   };
      // });
      // const wb = XLSX.utils.book_new();
      // data = [{rowes: '身份证号', reason: '错误信息', data: '详细信息'}, ...data];
      // const ws = XLSX.utils.json_to_sheet(data, {skipHeader: true});
      // XLSX.utils.book_append_sheet(wb, ws, '错误信息');
      // XLSX.writeFile(wb, '错误信息.xlsx');
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getHistory();
    },
  },
  mounted() {
    this.getHistory();
  },

};
</script>
<style scoped lang="less">
@import '../../styles/table-common.less';
@import '../personInfo.less';

::v-deep .ivu-drawer-body {
  padding-left: 0;
  padding-right: 0;
}

.tableStyle {
  width: 550px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 父容器高度，可以根据需要调整 */
}

.cust-modal {
  /deep/ .ivu-modal {
    width: 40% !important;
  }
}

.cust-drawer {
  /deep/ .ivu-drawer {
    width: 30% !important;
  }

  .left-box {
    height: calc(100% - 40px);
    padding-right: 20px;
    padding-left: 20px;
    overflow-y: auto;
    .img-wrapper {
      width: 100%;
      padding-right: 20px
    }
    .batch-edit {
      margin-left: 10px;
      height: 100%;
      overflow-y: auto;
    }

    .footer {
      border-top: 1 solid #e8eaec;
      padding-top: 10px;

      .f-wrapper {
        justify-content: center;
        margin-left: 350px;
        padding-top: 10px;
      }
    }
  }
}

.cmr16 {
  margin-right: 16px;
}

.icon01 {
  background: rgb(45, 154, 244);
  border-radius: 50%;
  padding: 3px
}

.c-drawer01 {
  /deep/ .ivu-drawer {
    width: 1000px !important;
  }
}
/deep/ .ivu-card-body {
  height: calc(100%) !important;
}
@media (max-width: 1920px) {
  /deep/ .ivu-table .ivu-table-fixed-right {
    height: calc(100%) !important;
  }

  /deep/ .ivu-table .ivu-table-fixed-right .ivu-table-fixed-body {
    height: calc(100%) !important;
  }

  /deep/ .ivu-table-body {
    height: calc(100% - 61px) !important;
  }
}
@media (min-width: 1921px) and (max-width: 3440px) {
  /deep/ .ivu-table .ivu-table-fixed-right {
    height: 97% !important;
  }

  /deep/ .ivu-table .ivu-table-fixed-right .ivu-table-fixed-body {
    height: 93% !important;
  }

}
</style>